Introduction to Web Design - 6. HTML - Color, Fonts and Special Characters

Introduction to Web Design - 6. HTML - Color, Fonts and Special Characters
6.1 RGB Colors \| 6.2 Adding a Background Color to a Page \| 6.3 Changing the Appearance of Text \| 6.4 Changing the Style, Size and Color of Text \| 6.5 Special Characters
Preface Markup Languages – A Definition and Some History Beginning HTML HTML Lists HTML Tables HTML - Color, Fonts and Special Characters HTML Links HTML Images HTML Frames Cascading Style Sheets MicroSoft PhotoDraw JavaScript HTML Forms and Form Handling VBScript MicroSoft FrontPage Active Server Pages Java Applets XML Meaning and More Macromedia Flash 5.0 References	There are several ways to change the appearance of the background and the text on a webpage. 6.1 RGB Colors There are two ways to specify a color in HTML. One way uses descriptive color names such as red, blue, green or darkgreen. Please note that color names are not supported by W3C and may be interpreted differently by different browsers. The other specifies a color using the RGB color scheme. The RGB color scheme allows you to control the amount of Red, Green and Blue that will glow from a pixel on the screen. The colors in the RGB color scheme are in the order of their initial and each color is given two characters that will determine how much of that color “glows” from a pixel. Each of the two characters for each color can be a digit (0 through 9) or a character (A through F). The two characters together represent a number in the hexadecimal numbering scheme (base 16). Using base 16 numbers allows the representation of higher numbers using only two characters. 256 numbers can be represented using only two characters in base 16 (00 through FF) as opposed to only 100 numbers that can be represented using base 10 numbers (00 through 99). Caution should be employed when changing the background colors. Some computers with low-end graphics cards will not be able to display some colors correctly (and may, in fact, display a color very different than intended). Refer to a chart such as the one located at The Center for Business - Color Codes for a selection of HTML colors and their color names and corresponding RGB codes. 6.2 Adding a Background Color to a Page One way to make your web page distinctive is to add a background color. The background color of a page can be altered with the BGCOLOR attribute in the beginning tag. Change the beginning body tag for your HTML page from to the following: <BODY BGCOLOR = #00FFFF> Save your file and view it in a browser. Change the BGCOLOR attribute to LIGHTGREY instead of #00FFFF. Save your file and view it in a browser. 6.3 Changing the Appearance of Text in an HTML Page There are two basic schemes for dictating the appearance of plain text in a webpage: (1) Physical tags and (2) Logical tags. 6.3.1 Physical Tags These tags control the appearance of text in an HTML page. These tags can be nested in order to produce a more defined style. For example, the <I> … </I> tags will cause the text in between to appear in italics. The <B> … </B> tags will cause the text in between to appear in bold print. Nesting these tags <B> <I> … </I> </B> will cause the text to appear in bold italics. Other physical tags include: <BIG> ... </BIG> - text will be larger than the default size. <BLINK> ... </BLINK> - text will blink <SMALL> ... </SMALL> - text will be smaller than the default size. <STRIKE> ... </ STRIKE > - text will have a line through it. <SUB> ... </SUB> - text will appear as subscript. <SUP> ... </SUP> - text will appear as superscript. <TT> ... </TT> - text will appear as teletype or typewriter print. <U> ... </U> - text will be underlined. 6.3.2 Logical Tags These tags define the content of the text in between and let the browser control the appearance of text in an HTML page. For example, the <CITE> … </CITE> tags indicate that the text in between is a citation. Most browsers will display the tags enclosed in CITE tags in italics. Other logical tags include: <CODE> … </CODE> - indicates that the text is computer programming source code. Most browsers will display this in a monospaced font (like the <TT> tag above). <EMP> … </EMP> - indicates emphasis. Text will appear in italics. <STRONG> … </ STRONG > - indicates text to be highlighted. Text will appear in bold print. <VAR> … </VAR> - indicates a variable in a mathematical expression. Text will appear as italics. Select a portion of text in your HTML file (one word, a phrase or a sentence) and put beginning and closing italics tags around it. Select another portion of text and use the bold tags, … Go to the end of your HTML file and add the following mathematical formula: <VAR> a</VAR> <SUP>2</SUP> + <VAR> b</VAR> <SUP>2</SUP> = <VAR> c </VAR> <SUP>2</SUP> <BR> It should appear like this: As noted earlier in this document, HTML ignores whitespace in your HTML file. If lines of text are supposed to appear on separate lines, you can use the break, <BR>, or paragraph, <P> … </P>, tags which cause a new line and a blank line followed by a new line respectively. Another option is to use the pre-formatted tags, <PRE> … </PRE>. These tags preserve the whitespace in text and put blank lines before and after the text within the tags. The <PRE> … </PRE> tags also display the text enclosed in monospaced (teletype) font, which is often not the most appealing. However, using the <TT> … </TT> (teletype) tags within the <PRE> … </PRE> tags will cause the text to appear in the default font for the page. Add the following to the end of your HTML page: <PRE> Breakfast Raisin Bran ½ cup milk black coffee Lunch 1 cup mixed greens 1 TB. Salad dressing ½ cup water-packed canned tuna, drained 1 cup blueberries Dinner ½ cup cooked pasta 3 oz. cooked chicken white meat 1 cup green beans, steamed Snack 1 graham cracker 1 small apple </PRE> Save your file and view it in a browser. Now, remove the <PRE> … </PRE> tags. Save your file and view it in a browser. Re-insert the <PRE> … </PRE>. 6.4 Changing the Style, Size and Color of Text in an HTML Page The color of the text for an entire page can be changed from black to any color that can be represented by the RGB color scheme by using the TEXT attribute of the tag. Change the beginning body tag for your HTML page from <BODY> to the following: <BODY BGCOLOR = LIGHTGREY TEXT = #00FFFF > Save your file and view it in a browser. Note that the combination of a lightgrey background and AQUA text is difficult to read. DO NOT use this combination in a real webpage unless you want to annoy and frustrate your users. The appearance of portions of text within a page can also be controlled using the <FONT> … </FONT> tags. (Use this tag sparingly, since it may be discontinued in future versions of HTML.) In order to have any effect on the enclosed text, the <FONT> tag needs to have attributes and values included. One of the attributes available for the <FONT> tag is the COLOR attribute. The values for the COLOR attribute are the same as are available for the text of an entire page, or the background color of a page. Select a portion of the text in your HTML file and place the following FONT tags around it: <FONT COLOR = #00FF00>...<FONT> Save your file and view it in a browser. Another attribute of the FONT tag is the SIZE attribute. The values for the SIZE attribute are numbers between 1 and 7. The default font size is 3. Try adding SIZE = 7 to the FONT tag added above. The superscript and subscript tags can be used along with the FONT SIZE attribute to simulate a fraction. Add the following to the end of your HTML file: <FONT SIZE = 1> <SUP> 3</SUP> / <SUB> 4 </SUB> </FONT> cups of milk. <BR> Save your file and view it in a browser. It should appear as follows: Another attribute of the FONT tag is the FACE attribute. The values for this attribute include “Courier New”, “Sans Serif”, “Charter”, “Avantgarde”, “Bookman”, “Lucida”, “Symbol”, “Utopia”, “Helvetica”, “Times”, “Serif”and “Fixed”. Try putting the follow FONT tags inside the <PRE> tags surrounding the Breakfast, Lunch, Dinner Snack menu above: <FONT FACE = “Times”> … </FONT> Save the file and view it in Internet Explorer and in Netscape. Note that the “tabs” in the pre-formatted text may appear out of line in different viewers. Try changing the face to another value and viewing it in different viewers again. The face tag should be used with some caution because different operating systems (PC, MAC and UNIX) have different default font faces and a particular FACE value may not be available on some machines or may not appear as intended. 6.5 Special Characters Since some symbols such as “<” and “>” are used to surround beginning and ending tags, some browsers cannot display these characters in normal text. In addition, there are other symbols (such as copyright, registered trademark, letters with accents, etc.) that are not routinely on keyboards that you may want to include in the text of an HTML page. In order to include these symbols on an HTML page, you can consult a reference of HTML characters such as that at http://www.w3schools.com/html/html_entitiesref.asp . Try adding the following to the bottom of your HTML page and then save and view your file. <BR> &copy is the copyright symbol. <BR> <BR> &reg is the registered trademark symbol. <BR> <BR> &deg is the degree symbol. <BR> <BR> &divide is the division symbol. <BR> The above code should appear as follows in a browser: References A Beginner's Guide to HTML http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerPrintable.html HTML: A Guide For Beginners http://www.geocities.com/Baja/4361/index.html HTML: An interactive guide for beginners. http://www.davesite.com/webstation/html/ HTML and XHTML Information www.w3c.org/markup HTML reference including browser suppport http://www.w3schools.com/html/html_reference.asp W3Schools HTML Tutorials http://www.w3schools.com/default.asp Willcam’s Comprehensive HTML Cross Reference http://www.willcam.com/cmat/html/crossref.html Anderson-Freed, S. (2002) Weaving a Website: Programming in HTML, Javascript, Perl and Java. Prentice-Hall:NJ. ISBN 0-13-028220-0 Visibone Webmaster’s ColorLab http://www.visibone.com/colorlab/ The Center for Business - Color Codes http://www.tcfb.com/tutorial/colors.html HTML Colors http://www.w3schools.com/html/html_colors.asp HTML special characters. http://www.w3schools.com/html/html_entitiesref.asp

6.1 RGB Colors | 6.2 Adding a Background Color to a Page | 6.3 Changing the Appearance of Text | 6.4 Changing the Style, Size and Color of Text | 6.5 Special Characters

There are several ways to change the appearance of the background and the text on a webpage.

6.1 RGB Colors

There are two ways to specify a color in HTML. One way uses descriptive color names such as red, blue, green or darkgreen. Please note that color names are not supported by W3C and may be interpreted differently by different browsers. The other specifies a color using the RGB color scheme.

The RGB color scheme allows you to control the amount of Red, Green and Blue that will glow from a pixel on the screen. The colors in the RGB color scheme are in the order of their initial and each color is given two characters that will determine how much of that color “glows” from a pixel. Each of the two characters for each color can be a digit (0 through 9) or a character (A through F). The two characters together represent a number in the hexadecimal numbering scheme (base 16). Using base 16 numbers allows the representation of higher numbers using only two characters. 256 numbers can be represented using only two characters in base 16 (00 through FF) as opposed to only 100 numbers that can be represented using base 10 numbers (00 through 99). Caution should be employed when changing the background colors. Some computers with low-end graphics cards will not be able to display some colors correctly (and may, in fact, display a color very different than intended).

Refer to a chart such as the one located at The Center for Business - Color Codes for a selection of HTML colors and their color names and corresponding RGB codes.

6.2 Adding a Background Color to a Page

One way to make your web page distinctive is to add a background color. The background color of a page can be altered with the BGCOLOR attribute in the beginning tag.

Change the beginning body tag for your HTML page from to the following:
```
<BODY BGCOLOR = #00FFFF>
```
Save your file and view it in a browser.
Change the BGCOLOR attribute to LIGHTGREY instead of #00FFFF. Save your file and view it in a browser.

6.3 Changing the Appearance of Text in an HTML Page

There are two basic schemes for dictating the appearance of plain text in a webpage: (1) Physical tags and (2) Logical tags.

6.3.1 Physical Tags

These tags control the appearance of text in an HTML page. These tags can be nested in order to produce a more defined style. For example, the … tags will cause the text in between to appear in italics. The … tags will cause the text in between to appear in bold print. Nesting these tags … will cause the text to appear in bold italics. Other physical tags include:

<BIG> ... </BIG> - text will be larger than the default size.
<BLINK> ... </BLINK> - text will blink
... - text will be smaller than the default size.
<STRIKE> ... </ STRIKE > - text will have a line through it.
... - text will appear as subscript.
... - text will appear as superscript.
<TT> ... </TT> - text will appear as teletype or typewriter print.
... - text will be underlined.

6.3.2 Logical Tags

These tags define the content of the text in between and let the browser control the appearance of text in an HTML page. For example, the <CITE> … </CITE> tags indicate that the text in between is a citation. Most browsers will display the tags enclosed in CITE tags in italics. Other logical tags include:

<CODE> … </CODE> - indicates that the text is computer programming source code. Most browsers will display this in a monospaced font (like the <TT> tag above).
<EMP> … </EMP> - indicates emphasis. Text will appear in italics.
… - indicates text to be highlighted. Text will appear in bold print.
<VAR> … </VAR> - indicates a variable in a mathematical expression. Text will appear as italics.

Select a portion of text in your HTML file (one word, a phrase or a sentence) and put beginning and closing italics tags around it.
Select another portion of text and use the bold tags, …
Go to the end of your HTML file and add the following mathematical formula:
```
<VAR> a</VAR> 2 + <VAR> b</VAR> 
2 = <VAR> c </VAR> 2 
```
It should appear like this:
As noted earlier in this document, HTML ignores whitespace in your HTML file. If lines of text are supposed to appear on separate lines, you can use the break, , or paragraph, … , tags which cause a new line and a blank line followed by a new line respectively. Another option is to use the pre-formatted tags, <PRE> … </PRE>. These tags preserve the whitespace in text and put blank lines before and after the text within the tags. The <PRE> … </PRE> tags also display the text enclosed in monospaced (teletype) font, which is often not the most appealing. However, using the <TT> … </TT> (teletype) tags within the <PRE> … </PRE> tags will cause the text to appear in the default font for the page.

Add the following to the end of your HTML page:

<PRE>
Breakfast 		Raisin Bran
			½ cup milk
			black coffee

Lunch			1 cup mixed greens
			1 TB. Salad dressing
			½ cup water-packed canned tuna, drained
			1 cup blueberries

Dinner			½ cup cooked pasta
			3 oz. cooked chicken white meat
			1 cup green beans, steamed

Snack			1 graham cracker
			1 small apple
</PRE>

Save your file and view it in a browser.
Now, remove the <PRE> … </PRE> tags. Save your file and view it in a browser.
Re-insert the <PRE> … </PRE>.

6.4 Changing the Style, Size and Color of Text in an HTML Page

The color of the text for an entire page can be changed from black to any color that can be represented by the RGB color scheme by using the TEXT attribute of the tag.

Change the beginning body tag for your HTML page from <BODY> to the following:
```
<BODY BGCOLOR = LIGHTGREY TEXT = #00FFFF >
```
Save your file and view it in a browser. Note that the combination of a lightgrey background and AQUA text is difficult to read. DO NOT use this combination in a real webpage unless you want to annoy and frustrate your users.
The appearance of portions of text within a page can also be controlled using the … tags. (Use this tag sparingly, since it may be discontinued in future versions of HTML.) In order to have any effect on the enclosed text, the tag needs to have attributes and values included.
One of the attributes available for the tag is the COLOR attribute. The values for the COLOR attribute are the same as are available for the text of an entire page, or the background color of a page. Select a portion of the text in your HTML file and place the following FONT tags around it:
```
...
```
Save your file and view it in a browser.
Another attribute of the FONT tag is the SIZE attribute. The values for the SIZE attribute are numbers between 1 and 7. The default font size is 3. Try adding SIZE = 7 to the FONT tag added above.
The superscript and subscript tags can be used along with the FONT SIZE attribute to simulate a fraction. Add the following to the end of your HTML file:
```
 3 / 4 cups of milk. 
```
Save your file and view it in a browser. It should appear as follows:
Another attribute of the FONT tag is the FACE attribute. The values for this attribute include “Courier New”, “Sans Serif”, “Charter”, “Avantgarde”, “Bookman”, “Lucida”, “Symbol”, “Utopia”, “Helvetica”, “Times”, “Serif”and “Fixed”. Try putting the follow FONT tags inside the <PRE> tags surrounding the Breakfast, Lunch, Dinner Snack menu above:
```
 … 
```
Save the file and view it in Internet Explorer and in Netscape. Note that the “tabs” in the pre-formatted text may appear out of line in different viewers. Try changing the face to another value and viewing it in different viewers again. The face tag should be used with some caution because different operating systems (PC, MAC and UNIX) have different default font faces and a particular FACE value may not be available on some machines or may not appear as intended.

6.5 Special Characters

Since some symbols such as “<” and “>” are used to surround beginning and ending tags, some browsers cannot display these characters in normal text. In addition, there are other symbols (such as copyright, registered trademark, letters with accents, etc.) that are not routinely on keyboards that you may want to include in the text of an HTML page. In order to include these symbols on an HTML page, you can consult a reference of HTML characters such as that at http://www.w3schools.com/html/html_entitiesref.asp .

Try adding the following to the bottom of your HTML page and then save and view your file.


<BR> &copy is the copyright symbol. <BR>
<BR> &reg  is the registered trademark symbol. <BR>
<BR> &deg is the degree symbol. <BR>
<BR> &divide is the division symbol. <BR>

The above code should appear as follows in a browser:

References

A Beginner's Guide to HTML http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerPrintable.html
HTML: A Guide For Beginners http://www.geocities.com/Baja/4361/index.html
HTML: An interactive guide for beginners. http://www.davesite.com/webstation/html/
HTML and XHTML Information www.w3c.org/markup
HTML reference including browser suppport http://www.w3schools.com/html/html_reference.asp
W3Schools HTML Tutorials http://www.w3schools.com/default.asp
Willcam’s Comprehensive HTML Cross Reference http://www.willcam.com/cmat/html/crossref.html
Anderson-Freed, S. (2002) Weaving a Website: Programming in HTML, Javascript, Perl and Java. Prentice-Hall:NJ. ISBN 0-13-028220-0
Visibone Webmaster’s ColorLab http://www.visibone.com/colorlab/
The Center for Business - Color Codes http://www.tcfb.com/tutorial/colors.html
HTML Colors http://www.w3schools.com/html/html_colors.asp
HTML special characters. http://www.w3schools.com/html/html_entitiesref.asp

Cynthia J. Martincic
cynthia.martincic@email.stvincent.edu
CIS Department
Saint Vincent College
Latrobe, PA 15650